<template>
	<div class="newBusiness">
		<h5 v-if='this_id'>卖场编辑</h5>
		<h5 v-else>新增卖场</h5>
		<div class="newBusiness_info">
			<div class="newBusiness_info_box">
				<h4>卖场信息</h4>
				<form action="#" class="form">
					<div class="form_all">
						<ul>
							<li><span class="tit">卖场名称</span>
								<el-input v-model="form.name" type="input"  placeholder="请输入卖场的名称"></el-input>
							</li>
							<li><span class="tit">卖场地址</span>
								<el-input v-model="form.address" type="textarea" :rows="2" placeholder="请输入卖场的地址"></el-input>
							</li>
							<li><span class="tit">卖场经度</span>
								<el-input v-model="form.long" readonly type="number" max=180 min=0  placeholder="地图选择位置获取"></el-input>
							</li>
							<li><span class="tit">卖场纬度</span>
								<el-input v-model="form.lat" readonly type="number" max=90 min=0  placeholder="地图选择位置获取"></el-input>
							</li>
						</ul>
					</div>
				</form>
        <div style="width:70%;height:800px;margin:0 auto;" class="newBusiness_info type6">
          <iframe id="mapPage" width="100%" height="100%" frameborder=0
            :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=EHPBZ-PHO3W-FUORZ-RTLED-YEX4O-PPFIB&referer=myapp&coord=${latlng}`">
          </iframe>
        </div>
			</div>
		</div>
		
		<div class="submitBtn">
			<button @click="toEdit">提交</button>
		</div>

		


		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user_id: null,
				this_id: null, //编辑跳转过来的id
				form: {
					id: null, //id
					name: "", //名称
					address: "", //地址
					lat: '', //纬度
					long: '', //经度
				},
				latlng:'',//地图回显coord经纬度
			};
		},
		mounted() {
			let this_id = this.$route.query.id;
			this.this_id = this_id ? this_id : null;
			let user_id = localStorage.getItem("user_id");
			this.user_id = Number(user_id);
			this.getShopStore();

      
			// 监听用户选择位置
			let that = this
			window.addEventListener('message', function(event) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				var loc = event.data;
				if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					console.log('location', loc);
					that.form.lat = loc.latlng.lat;
					that.form.long = loc.latlng.lng;
					that.form.address = loc.poiaddress;
				}
			}, false)

		},
		methods: {
			
			//获取详情
			getShopStore() {
				if (this.this_id) {
					this.$http
						.post("/api/root/market/view", {
							user_id: this.user_id,
							id: this.this_id
						})
						.then(res => {
							console.log(res);
							if (res.code == 1) {
								let data = res.data;
								this.form = data ? data : [];
                this.latlng = res.data.lat+','+res.data.long;
								console.log(this.form)
							}
						});
				}
			
			},

			// 提交按钮
			toEdit() {
				console.log(this.form);
				if(!this.form.name){
					this.$message.error('卖场名称不能为空');
				}else if(!this.form.address){
					this.$message.error('地址不能为空');
				}else if(!this.form.long || !this.form.lat){
					this.$message.error('经纬度不能为空');
				}else if(this.form.id){
					this.$http.post('/api/root/market/edit',this.form).then(res => {
						if (res.code) {
							this.$message({
								type: 'success',
								message: '修改成功'
							})
						}else{
							this.$message.error(res.msg);
						}
					})
				}else{
					this.$http.post('/api/root/market/add',this.form).then(res => {
						if (res.code) {
							this.$message({
								type: 'success',
								message: '修改成功'
							})
							this.$router.push({path:'/marketList'})
						}else{
							this.$message.error(res.msg);
						}
					})
				}
				
				
			},
			

		}
	};
</script>

<style lang="less" scoped>
	@import "marketdetail.less";
</style>
<style>
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.newBusiness .newBusiness_info .newBusiness_info_box .form .form_all ul li span.el-tag el-tag--light {
		width: auto;
		text-align: center;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.uoloadSty .el-upload--picture-card {
		width: 110px;
		height: 110px;
		line-height: 110px;
	}

	.disUoloadSty .el-upload--picture-card {
		display: none;
		/* 上传按钮隐藏 */
	}


	/*
	.button-new-img{
		width: 80px;
		height: 80px;
		font-size: 40px;
		text-align: center;
		line-height: 80px;
		vertical-align: middle;
	}
	
	.imgbox .imgwrap{
		width: 80px;
		margin-right: 10px;
		height: 80px;
		display: inline-block;
		overflow: hidden;
		position: relative;
		vertical-align: middle;
		border: 2px solid #C0C0C0;
		
	}
	.imgbox .imgwrap img{
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	*/
	.addNextQuestion {
		width: 100%;
		padding: 20px 0;
	}

	.addNextQuestion .addNextBtn {
		display: inline-block;
		font-size: 20px;
		height: 2em;
		line-height: 2em;
		border-radius: 6px;
		background-color: #0080FF;
		color: #fff;
		padding: 0 10px;
		cursor: pointer;
	}


	.nextQuestionBox {
		width: 100%;
		padding: 20px 0;
		margin: 0;
		border-bottom: 2px solid #C0C0C0;
	}

	.nextQuestionBox .questionTit {
		font-size: 18px;
		line-height: 2em;
	}

	.nextQuestionBox .questionID {
		font-size: 20px;
		line-height: 2em;
		color: #000FFF;
	}

	.nextQuestionBox .questionContent {
		width: calc(100% - 80px);
		padding-left: 80px;
		position: relative;
	}

	.questionContent ul {
		list-style: none;
		position: absolute;
		left: 0;
		top: 0;
	}

	.questionContent ul li {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: inline-block;
		border: 2px solid #C0C0C0;
	}

	.questionContent p {
		padding: 2px 0;
	}

	.questionContent p.keywords {
		padding: 8px 0;
	}

	.questionContent .imglist {
		height: 80px;
	}

	.questionContent .imglist img {
		width: 80px;
		height: 80px;
		margin-right: 10px;
		vertical-align: top;
	}

	.imgbox {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	.logoShadow {
		position: relative;
		width: 80px;
		height: 80px;
		display: inline-block;
		margin-right: 10px;
	}

	.logoShadow img {
		width: 100%;
		height: 100%;
	}

	.logoShadow .deleteShadow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		opacity: 0;
		color: #fff;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: 0.2s;

		i {
			cursor: pointer;
		}
	}

	.logoShadow:hover .deleteShadow {
		opacity: 1;
	}

	.uploadImg {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px solid rgba(0, 0, 0, 0.3);
		display: inline-block;

	}

	.newBusiness .newBusiness_info .newBusiness_info_box .form .form_all ul li .uploadImg input.inputIMG {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		opacity: 0;
		padding: 0;
		margin: 0;
	}

	.uploadImg .fileImg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		text-align: center;
		line-height: 80px;
	}

	.el-dialog {
		width: 80%;

	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog .el-dialog__body {
		background-color: #f5f5f5;
	}
</style>
